<template>
    <div>
        <h1>进阶</h1>
        <p> id : {{id}} </p>
        <p> username: {{username}} </p>
        <p> gender: {{gender}} </p>
    </div>
</template>

<script>
export default {
    name: 'Advanced' ,
    data(){
        return {
            id: '' ,
            username: '' ,
            gender: '' 
        }
    },
    // 仅在组件挂载时执行 mounted 钩子函数
    mounted(){
        console.log( 'mounted' );
        console.log( '当前路由: ' , this.$route );
        console.log( '路由参数: ' , this.$route.params );
        console.log( 'queryString: ' , this.$route.query );
        this.id = this.$route.params.id ;
        this.username = this.$route.params.username ;
        this.gender = this.$route.params.gender ;
    },
    // 导航守卫: 组件内的守卫
    // 如果多个路由复用同一个组件，则访问这些路由时，同一个组件只挂载一次
    // 但是访问的路由是不同的，因此传递参数也是不同的
    // 为了在访问复用同一个组件不同的路由时能够获取路由中的信息，可以在 beforeRouteUpdate 实现
    beforeRouteUpdate( to , from ){
        console.log( 'beforeRouteUpdate' );
        console.log( 'from: ' , from );
        console.log( 'to: ' , to );
        console.log( '路由参数: ' , to.params );
        console.log( 'queryString: ' , to.query );
        this.id = to.params.id ;
        this.username = to.params.username ;
        this.gender = to.params.gender ;
    }
}
</script>